<template>
  <div class="hello">
   
  </div>
</template>

<script>
	import {areadata} from '../mock/mockdata.js'
	
	export default {
		name: 'HelloWorld',
		data(){
			return{
				adata:areadata
			}
		},
		methods:{
			handledata(){
				let newarr = [];
				this.adata.forEach(item=>{
					let p1 = item.code.toString().substr(0,3);
					let p2 = item.code.toString().substr(3,3);
					let p3 = item.code.toString().substr(6,3);
					let p4 = item.code.toString().substr(9,3);
					newarr.push({
						code:item.code,
						name:item.name,
						category:item.category,
						p1:p1,
						p2:p2,
						p3:p3,
						p4:p4
					})
				})
				
				newarr.forEach(item=>{
					if(item.p4 !=='000'){
						item.parentId = item.p1+ item.p2+ item.p3 + "000";
						item.level = 'community'
					}else if(item.p3 !== '000'){
						item.parentId = item.p1+ item.p2+ "000000"
						item.level = 'shreet'
					}else if(item.p2 !== '000'){
						item.parentId = item.p1+ "000000000"
						item.level = 'district'
					}
							delete item.p1
							delete item.p2
							delete item.p3
							delete item.p4
				})
				// let result = newarr;
				// result.forEach(item=>{
				// 	newarr.forEach(el=>{
				// 		if(item.code == el.parentId){
				// 			item.children.push(el)
				// 		}
				// 		delete item.p1
				// 		delete item.p2
				// 		delete item.p3
				// 		delete item.p4
				// 	})
				// })
				console.log(newarr)
			}
		},
		mounted(){
			this.handledata();
		}
	}
	</script>

	<!-- Add "scoped" attribute to limit CSS to this component only -->
	<style scoped>
	h3 {
		margin: 40px 0 0;
	}
	ul {
		list-style-type: none;
		padding: 0;
	}
	li {
		display: inline-block;
		margin: 0 10px;
	}
	a {
		color: #42b983;
	}
	</style>
